<template>
  <div class="demo-inner-divider">基础用法</div>
  <p>用于替换浏览器原生滚动条</p>
  <p>通过 height 属性设置滚动条高度，若不设置则根据父容器高度自适应。</p>
  <div style="height:500px">
    <e-scrollbar height="400px">
      <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
    </e-scrollbar>
  </div>


  <div class="demo-inner-divider">横向滚动条</div>
  <div class="demo-content">
    <e-scrollbar>
      <div class="scrollbar-flex-content">
        <p v-for="item in 50" :key="item" class="scrollbar-demo-item1">
          {{ item }}
        </p>
      </div>
    </e-scrollbar>
  </div>

  <div class="demo-inner-divider">最大高度</div>
  <p>当元素高度超过最大高度，才会显示滚动条。</p>

  <div>
    <e-button @click="add">Add Item</e-button>
    <e-button @click="onDelete">Delete Item</e-button>
    <e-scrollbar max-height="400px" native>
      <p v-for="item in count" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </e-scrollbar>
  </div>

  <div class="demo-inner-divider">手动触发滚动</div>
  <p>手动触发滚动</p>
  <div>
    <e-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
      <div ref="innerRef">
        <p v-for="item in 20" :key="item" class="scrollbar-demo-item">
          {{ item }}
        </p>
      </div>
    </e-scrollbar>

    <e-slider
      v-model="value"
      :max="max"
      @on-input="inputSlider"
      :tip-format="(val) => `${val} px`" 
    />
  </div>
  <ScrollBarMd class="markdown-body"></ScrollBarMd>
</template>
<script setup>
import { onMounted,ref } from 'vue'

import ScrollBarMd from "../../docs/scrollbar.md"
const count = ref(3)

const add = () => {
  count.value++
}
const onDelete = () => {
  if (count.value > 0) {
    count.value--
  }
}
const max = ref(0)
const value = ref(0)
const innerRef = ref()
const scrollbarRef = ref()

onMounted(() => {
  max.value = innerRef.value.clientHeight - 380
})

const inputSlider = (value) => {
  scrollbarRef.value.setScrollTop(value)
}
const scroll = ({ scrollTop }) => {
  value.value = scrollTop
}
const formatTooltip = (value) => {
  return `${value} px`
}
</script>
<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: #ecf5ff;
  color: #409eff;
}

.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item1 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: #ecf5ff;
  color: #409eff;
}

.demo-content{
  width: 600px;
}
</style>
